<template>
  <div id="warpper">
    <el-container style="height: 100%">
      <el-header class="header">
        <div class="logo"></div>
        <div class="tips">活动信息发布管理系统</div>
        <div class="AdminInfo">
          <el-dropdown @command="handleCommand">
            <div class="el-dropdown-link dropdown-link">
              <el-avatar fit="cover" :size="60" :src="userInfo.avatar"></el-avatar>
              <span>{{ userInfo.name }}</span>
              <i class="el-icon-arrow-down el-icon--right"> </i>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="goToCenter">个人中心</el-dropdown-item>
              <el-dropdown-item command="goToLogin">登出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-aside :width="isCollapse ? '64px' : '220px'">
          <div class="collapse" @click="isCollapse = !isCollapse">
            <i v-show="!isCollapse" class="el-icon-s-fold"></i>
            <i v-show="isCollapse" class="el-icon-s-unfold"></i>
          </div>
          <el-menu class="el-menu-vertical-demo" :default-active="activeMenu" @select="selectMenu" :collapse="isCollapse" router text-color="#FFF" :collapse-transition="false" active-text-color="#FFF">
            <template v-for="(item1, index) in menuData">
              <el-menu-item :key="index" :index="item1.path" v-if="item1.children.length == 0">
                <span style="font-size: 16px; margin-right: 4px" :class="`iconfont ${item1.icon}`"></span>
                <span slot="title">{{ item1.name }}</span>
              </el-menu-item>
              <el-submenu :key="index + 0" :index="index + ''" v-else>
                <template slot="title">
                  <span style="font-size: 16px; margin-right: 4px" :class="`iconfont ${item1.icon}`"></span>
                  <span slot="title">{{ item1.name }}</span>
                </template>
                <el-menu-item v-for="(item2, j) in item1.children" :key="j" :index="item2.path">
                  <span style="font-size: 16px" :class="`iconfont ${item2.icon}`"></span>
                  <span slot="title"> {{ item2.name }}</span>
                </el-menu-item>
              </el-submenu>
            </template>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main>
            <router-view @upMenu="upMenu" @upUserInfo="upUserInfo"></router-view>
          </el-main>
          <el-footer style="display: flex; align-items: center">2020级计算机科学与技术三班李抱龙毕设作品</el-footer>
        </el-container>
      </el-container>
    </el-container>
    <el-dialog title="个人中心" top="5vh" :visible.sync="personDialogFormVisible">
      <Person :person="person" @editAdmin="editAdmin"></Person>
    </el-dialog>
  </div>
</template>

<script>
import { getAdminInfo, getRoleMenus, addOrEditAdmin } from '@/api/adminApi.js'
import Person from './Person'
export default {
  data() {
    return {
      isCollapse: false,
      menuData: [],
      activeMenu: 'statistics',
      userInfo: {},
      person: {},
      personDialogFormVisible: false,
    }
  },
  components: {
    Person,
  },
  created() {
    this.activeMenu = this.$sessionStorage('get', 'activeMenu') != null ? this.$sessionStorage('get', 'activeMenu') : 'statistics'
    this.userInfo = this.$sessionStorage('get', 'userInfo') ? this.$sessionStorage('get', 'userInfo') : {}
    this.getData()
  },
  methods: {
    getData() {
      getRoleMenus(this.userInfo).then((res) => {
        if (res.data.code != 200) return this.$message.error(`数据请求失败！！！`)
        this.menuData = res.data.data
        this.userInfo.menus = res.data.data
        this.$sessionStorage('set', 'userInfo', this.userInfo)
      })
    },
    //将选中的菜单路径保存到浏览器缓存中
    selectMenu(i) {
      this.$sessionStorage('set', 'activeMenu', i)
    },
    upMenu() {
      this.getData()
    },
    upUserInfo(id) {
      getAdminInfo({ id }).then((u) => {
        this.$sessionStorage('set', 'userInfo', u.data.data[0])
        this.userInfo = u.data.data[0]
      })
    },

    handleCommand(command) {
      switch (command) {
        case 'goToCenter':
          this.person = JSON.parse(JSON.stringify(this.userInfo))
          this.personDialogFormVisible = true
          break
        case 'goToLogin':
          sessionStorage.clear()
          this.$router.push('/login')
          break
      }
    },
    editAdmin(data) {
      addOrEditAdmin(data).then((res) => {
        if (res.data.code != 200) return this.$message.error(`修改失败！！！`)
        this.$message.success(`修改成功`)
        this.userInfo = JSON.parse(JSON.stringify(data))
        this.$sessionStorage('set', 'userInfo', this.userInfo)
        this.userInfo = this.$sessionStorage('get', 'userInfo') ? this.$sessionStorage('get', 'userInfo') : {}
        // this.personDialogFormVisible = false
      })
    },
  },
}
</script>
<style lang="less" scoped>
.header {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  .logo {
    width: 80px;
    height: 100%;
    background: url('../../assets/logo.png') no-repeat;
    background-size: 100% 100%;
    margin-right: 10px;
  }
  .tips {
    flex: 4;
    height: 100%;
    font-family: '阿里妈妈刀隶体 Regular';
    font-size: 26px;
    display: flex;
    align-items: center;
  }
  .AdminInfo {
    flex: 1;
    text-align: right;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }
}

.collapse {
  width: 98%;
  height: 40px;
  display: flex;
  cursor: pointer;
  justify-content: center;
  //   background: #909399;
  i {
    font-size: 24px;
    color: #fff;
  }
}
</style>